<template>
  <el-card class="tb-warp">
    <crud-table-v2 url="/testStudentList" :params="{name: 'qq'}">
      <crud-table-header :inline="false">
        <crud-table-search :hideReset="true" :collapse="false">
          <template #search>
            <!-- <el-row :gutter="20">
              <el-col :md="8"> -->
                <el-form-item label="姓名：" label-width="82px" prop="realName">
                  <el-input placeholder="请输入预约人姓名" clearable />
                </el-form-item>
              <!-- </el-col>
              <el-col :md="8"> -->
                <el-form-item label="手机：" label-width="82px" prop="realPhone">
                  <el-input placeholder="请输入预约人手机号" clearable />
                </el-form-item>
              <!-- </el-col>
              <el-col :md="8"> -->
                <el-form-item label="预约日期：" prop="time">
                  <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" />
                </el-form-item>
              <!-- </el-col>
            </el-row> -->
          </template>
        </crud-table-search>
        <crud-table-action>
          <crud-table-btn-add url="/testStudentList/add" />
        </crud-table-action>
      </crud-table-header>

      <crud-table-pagination>
        <crud-table-data>
          <el-table-column label="name" prop="name" algin="center" />
          <el-table-column label="age" prop="age" algin="center" />
          <crud-table-handler width="220px">
            <template #hander="{row}">
              <crud-table-btn-preview />
              <!-- :reqEntity="{method: 'post'}" 修改默认请求方法put ==> post -->
              <crud-table-btn-edit style="color: #67C23A;" echoUrl="/testStudentList/getById" url="/testStudentList/edit" isQuery />
              <crud-table-btn-del style="color: #F56C6C;" url="/testStudentList/delete" />
              <el-button type="text" style="color: #E6A23C;" @click="showList(row)">查看列表</el-button>
            </template>
          </crud-table-handler>
        </crud-table-data>
      </crud-table-pagination>

      <crud-table-dialog :defaultFields="obj" :formProps="{labelPosition:'right', rules: formRules}" width="50%">
        <template #formDialog>
          <el-form-item label="姓名" prop="name">
            <el-input clearable placeholder="姓名" />
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input clearable placeholder="年龄" />
          </el-form-item>
        </template>
      </crud-table-dialog>
    </crud-table-v2>

    <el-dialog append-to-body :visible.sync="visible" title="学生列表" width="80vw" top="8vh">
      <my-table v-if="visible" ref="table" style="height: 600px" />
    </el-dialog>
  </el-card>
</template>

<script>
export default {
  components: {
    MyTable: () => import('./table.vue')
  },
  data() {
    return {
      obj: {age: 110},
      visible: false,
      tableColumns: [
        {
          label: 'id',
          prop: 'id',
        },
        {
          label: 'info1',
          prop: 'info1',
          children: [
            {
              label: '学号',
              prop: 'stu_num',
            },
            {
              label: '姓名',
              prop: 'name',

            },
          ]
        },
        {
          label: '性别',
          prop: 'sex',
        },
        {
          label: '年龄',
          prop: 'age',
        },
        {
          label: 'info2',
          prop: 'info2',
          children: [
            {
              label: '手机号码',
              prop: 'phone',
            },
            {
              label: '证件号码',
              prop: 'IDCard',
            },
          ]
        },
        {
          label: '民族',
          prop: 'nation',
        },
        {
          label: '地址',
          prop: 'presentAddr',
        }
      ],
      formRules: {
        name: [{ required: true, message: '请输入姓名', trigger: ['change', 'blur'] }],
        age: [{ required: true, message: '请输入年龄', trigger: ['change', 'blur'] }],
      }
    }
  },
  methods: {
    tableLoaded(ev) {
      console.log(ev)
    },
    rowClick(ev) {
      console.log(ev)
    },
    showList(row) {
      // console.log(row)
      this.visible = true
    }
  }
}
</script>

<style>
.tb-warp {
  height: 100%;
  /* margin: 10px; */
}
.tb-warp .el-card__body {
  height: 100%;
  box-sizing: border-box;
}
</style>
